import { useEffect, useLayoutEffect, useState } from 'react';
import { Mask, Switch } from 'antd-mobile';
import clsx from 'clsx';
import styles from './index.module.less';
import socket from '@/socket';
import { useRecoilState } from 'recoil';
import { RoundDetailMaskState, RoundDetailState } from '@/state';

interface Props {
  visible: boolean;
  onClose: (value?: number) => void;
}

const HistoryMask: React.FC<Props> = ({ visible, onClose }) => {
  const [page, setPage] = useState(1);
  const [allPage, setAllPage] = useState(1);
  const [list, setList] = useState([]);
  const [, setRoundDetailMaskState] = useRecoilState(RoundDetailMaskState);
  const [, setRoundDetailState] = useRecoilState(RoundDetailState);

  useEffect(() => {
    const listen = (msg: Msg) => {
      const { pageNum, pageList, totalPage } = msg.body || { pageNum: 1, pageList: [], totalPage: 1 };
      setList(pageList);
      setPage(pageNum);
      setAllPage(totalPage);
    };

    socket.listen(['BET_HISTORY_RESULT'], listen);

    return () => {
      socket.unListen(listen);
    };
  }, []);

  const getBetTime = (dateTIme: any) => {
    const date = new Date(dateTIme); // 乘以 1000 转换为毫秒

    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');

    const formattedDate = `${day}.${month}.${year}`;
    const formattedTime = `${hours}:${minutes}`;
    return formattedDate + " " + formattedTime;
  };

  return (
    <Mask
      opacity={0.2}
      visible={visible}
      onMaskClick={() => onClose()}
    >

      <div
        className={styles.HistoryMask}
      >
        <div className={styles.titleBox}>
          GAME HISTORY
          <i className={styles.icon} onClick={() => { onClose() }}></i>
        </div>
        <div className={styles.height100}>
          <div className={styles.legend}>
            <span className={styles.Time}>
              Time
            </span>
            <span className={styles.bet}>
              Bet
            </span>
            <span className={styles.cashOut}>
              Cash out
            </span>
            <span className={styles.Multiplier}>
              Multiplier
            </span>
          </div>
        </div>
        <div className={styles.scroll}>
          {
            list.map((item: any, i) => (
              <div className={styles.line}
                onClick={() => {
                  setRoundDetailMaskState(true);
                  setRoundDetailState(item);
                }}
                key={i}>
                <div className={styles.a1}>
                  {getBetTime(item.playDateTime)}
                </div>
                <div className={styles.a2}>
                  {item.betAmount}
                </div>
                <div className={clsx(styles.a3, !!item.prizeAmount && styles.green)}>
                  {item.prizeAmount}
                </div>
                <div className={clsx(styles.a4, !!item.prizeAmount && styles.green)}>
                  <div className={styles.wid50}>{item.multiple || 0}x  </div>
                  <span className={styles.successIcon}></span>
                </div>
              </div>
            ))
          }
        </div>
        <div className={styles.pagination}>
          <div className={clsx(styles.prevBtn, page === 1 && styles.disable)}
            onClick={() => {
              if (page !== 1) {
                socket.send({
                  msgType: 'BET_HISTORY', body: { pageNo: page - 1 }
                });
              }
            }}
          >Previous page</div>
          <div>
            {page}&nbsp;/&nbsp;{allPage}
          </div>
          <div className={clsx(styles.prevBtn, page === allPage && styles.disable)}
            onClick={() => {
              if (page !== allPage && list.length) {
                socket.send({
                  msgType: 'BET_HISTORY', body: { pageNo: page + 1 }
                });
              }
            }}
          >Next page</div>
        </div>
      </div>
    </Mask>
  );
};

export default HistoryMask;
